<!--
 * @功能描述: 基础list demo
 * @author: lzn
 * @date: 2022-09-22 09:21:31
 * @version: 1.0
-->
<script setup>
const lists = ['lg', 'normal', 'sm'];
</script>

<template>
  <div v-for="list in lists">
    <h2>{{ list }}</h2>
    <div class="yw-base-list yw-list-bordered" :class="'base-list-' + list">
      <div class="base-list-header">
        header
      </div>
      <ul class="base-list-items">
        <li class="base-list-item">
          Racing car sprays burning fuel into crowd.dwd
        </li>
        <li class="base-list-item">
          Racing car sprays burning fuel into crowd.
        </li>
        <li class="base-list-item">
          Racing car sprays burning fuel into crowd.
        </li>
      </ul>
      <div class="base-list-footer">
        footer
      </div>
    </div>
  </div>

  <div class="yw-base-row">
    <div class="yw-base-list yw-list-bordered yw-base-col" :class="'base-list-' + list">
      <div class="base-list-header">
        header
      </div>
      <ul class="base-list-items">
        <li class="base-list-item">
          Racing car sprays burning fuel into crowd.dwd
        </li>
        <li class="base-list-item">
          Racing car sprays burning fuel into crowd.
        </li>
        <li class="base-list-item">
          Racing car sprays burning fuel into crowd.
        </li>
      </ul>
      <div class="base-list-footer">
        footer
      </div>
    </div>
    <div class="yw-base-list yw-list-bordered yw-base-col" :class="'base-list-' + list">
      <div class="base-list-header">
        header
      </div>
      <ul class="base-list-items">
        <li class="base-list-item">
          Racing car sprays burning fuel into crowd.dwd
        </li>
        <li class="base-list-item">
          Racing car sprays burning fuel into crowd.
        </li>
        <li class="base-list-item">
          Racing car sprays burning fuel into crowd.
        </li>
      </ul>
      <div class="base-list-footer">
        footer
      </div>
    </div>
    <div class="yw-base-list yw-list-bordered yw-base-col" :class="'base-list-' + list">
      <div class="base-list-header">
        header
      </div>
      <ul class="base-list-items">
        <li class="base-list-item">
          Racing car sprays burning fuel into crowd.dwd
        </li>
        <li class="base-list-item">
          Racing car sprays burning fuel into crowd.
        </li>
        <li class="base-list-item">
          Racing car sprays burning fuel into crowd.
        </li>
      </ul>
      <div class="base-list-footer">
        footer
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
